<template>
	<view>
		<!-- 标题栏 -->
		<view style="padding-top: var(--status-bar-height); 
		display: flex; justify-content: space-between; align-items: center; padding: 0px 24rpx;
		 height: calc(var(--status-bar-height) + 100rpx); background-color: #FFFFFF;
		 font-size: 32rpx;">
		 <text style="flex: 1;" @click="goback()">
				{{ '<' }}
			</text>
			
			<view class="" style="font-weight: bold; flex: 1; text-align: center;">
				维保预约
			</view>
			<view style="flex: 1; text-align: right;">
				维保历史
			</view>
		</view>
		<!-- 点击车主服务模块中的【维保预约】进入维保预约页面，页面顶
		部显示标题栏，标题栏右侧显示【维保历史】按钮，页面内容部分显
		示预约表单，页面底部显示【预约提交】按钮，预约表单包括维保类
		型、城市、维保服务站（4S 店）、预约日期、预约时间、维保车辆、
		车牌号码、联系人姓名、联系电话，维保类型包括常规保养和车辆维
		修，默认为常规保养。 -->
		<view class="bigbox">
			<view class="list">
				<view class="list-item">
					<view class="lable">维保类型</view>
					<view class="value">
						<radio-group name="维保类型" @change="Changetype">
							<label>
								<radio value="1" checked="true" /><text>常规保养</text>
							</label>
							<label>
								<radio value="2" /><text>车辆维修</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="list-item">
					<view class="lable">城市</view>
					<view class="value">
						<picker :range="region" @change="onRegionChange">{{ region[regionIndex] }}
						</picker>
					</view>
				</view>
				<view class="list-item">
					<view class="lable">维保服务站(4s店)</view>
					<view class="value"><input type="text" value="" placeholder="请输入...." /></view>
				</view>
				<view class="list-item">
					<view class="lable">预约日期</view>
					<view class="value">
						<picker mode="date" @change="onChangeDate">
							{{date}}
						</picker>
					</view>
				</view>
				<view class="list-item">
					<view class="lable">维保车辆</view>
					<view class="value"><input type="text" value="" placeholder="请输入...." /></view>
				</view>
				<view class="list-item">
					<view class="lable">车牌号码</view>
					<view class="value"><input type="text" value="" placeholder="请输入...." /></view>
				</view>
				<view class="list-item">
					<view class="lable">联系人姓名</view>
					<view class="value"><input type="text" value="" placeholder="请输入...." /></view>
				</view>
				<view class="list-item">
					<view class="lable">联系电话</view>
					<view class="value"><input type="text" value="" placeholder="请输入...." maxlength="11" /></view>
				</view>
			</view>
			<view v-if="type==2" class="list" style="padding: 12rpx;">
				<view class="" style="font-weight: bold; font-size: 36rpx;">
					维修方案
				</view>
				<!-- 零件更换列表 -->
				<view class="middlelist">
					<text style="font-weight: bold;">零件更换</text>
					<!-- 列表容器 -->
						<!-- 列表项 -->
						<view class="list-item" v-for="(item, index) in change_parts" :key="index">
							<text>
								{{ item.name }}
							</text>
							<text class="value price">
								￥{{ item.price}}
							</text>
						</view>
				</view>
				<!-- 维修类面列表 -->
				<view class="middlelist" >
					<text style="font-weight: bold;">维修类面列表</text>
					<!-- 列表容器 -->
						<!-- 列表项 -->
						<view class="list-item" v-for="(item, index) in maintenance_category" :key="index">
							<text>
								{{ item.name }}
							</text>
							<text class="value price">
								￥{{ item.price}}
							</text>
						</view>
				</view>
				<!-- 信息概览 -->
				<view class="middlelist">
					<view class="list-item">
						<text >维修总价</text>
						<text class="price value">￥{{ clacTotalPrice }}</text>
					
					</view>
					<view class="list-item">
						<text>维修周期</text>
						<text class="value">{{ maintenace_day }}</text>
					</view>
				</view>
				
			</view>

			<!-- 签名版 -->
			<view class="signature-area">
				<view class="section-title">电子签名</view>

				<!-- 签名画布 -->
				<canvas canvas-id="signatureCanvas" class="signature-canvas" disable-scroll
					@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></canvas>

				<!-- 操作按钮 -->
				<view class="button-group">
					<button class="btn reset-btn" @click="handleReset">重签</button>
					<button class="btn confirm-btn" :disabled="hasSignature" @click="handleConfirm">
						确认签名
					</button>
				</view>

				<!-- 签名提示 -->
				<view class="signature-tip" :class="{ confirmed: hasSignature }">
					{{ hasSignature ? '签名已确认' : '请用手指在上方区域签名' }}
				</view>
			</view>


			<button type="primary">预约提交</button>

			<!-- （1）选择维保类型为车辆维修时，预约表单下方显示维修方案
		和电子签名区域， 维修方案包括更换零件、维修类目、单项价格、
		维修总价、维修周期，在签名区域手写签名确认后方可提交。 -->

			<!-- （2）完成预约表单信息后，点击【预约提交】按钮进行提交，提
		交成功后进入支付页面，支付成功后返回首页，可在维保历史页面中
		查看预约记录 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				region: ['广东', '北京', '上海'],
				regionIndex: 0,
				date: this.getDate(),
				time: this.getTime(),
				change_parts: [{
						name: "发动机滤清器",
						price: 300.00
					},
					{
						name: "刹车片",
						price: 450.00
					}
				],
				maintenance_category: [{
						name: "发动机系统检修",
						price: 100.00
					},
					{
						name: "变速箱维修",
						price: 250.00
					}
				],
				maintenace_day: 25,


				// Ai示例数据
				hasSignature: false,
				ctx: null,
				points: [],
				canvasWidth: 0,
				canvasHeight: 300,
				dpr: 1,

				parts: [{
						name: "发动机滤清器",
						price: "300.00"
					},
					{
						name: "刹车片",
						price: "450.00"
					}
				],
				fix_types: [{
						name: "发动机系统检修",
						price: "100.00"
					},
					{
						name: "变速箱维修",
						price: "250.00"
					}
				],

				category: "发动机系统维修",
				singlePrice: "200.00",
				totalPrice: "950.00",
				cycle: 3,

				// 签名图片路径（示例）
				signaturePath: '',
				// 实际需要实现触摸事件记录坐标
				points: []
			}
		},
		computed: {
			clacTotalPrice() {
				let price = 0
				for (let v of this.change_parts) {
					price += v.price
				}
				for (let v of this.maintenance_category) {
					price += v.price
				}
				return price
			}
		},
		mounted() {
			this.initCanvas()
		},
		methods: {
			goback(){
				uni.navigateBack()
			},
			Changetype(e) {
				// console.log(e)
				this.type = e.detail.value
			},
			onRegionChange(e) {
				let v = e.detail.value
				this.regionIndex = v
			},
			onChangeTime(e) {
				this.time = e.detail.value
			},
			onChangeDate(e) {
				this.date = e.detail.value
			},
			getDate() {
				let date = new Date()

				let y = String(date.getFullYear())
				let m = String(date.getMonth() + 1)
				let d = String(date.getDay())

				return `${y}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`
			},
			getTime() {
				let now = new Date()

				let hours = String(now.getHours()).padStart(2, '0')
				let minutes = String(now.getMinutes()).padStart(2, '0')

				return `${hours}:${minutes}`
			},

			// 以下为Ai函数
			// 初始化画布
			initCanvas() {
				const systemInfo = uni.getSystemInfoSync()
				this.dpr = systemInfo.pixelRatio
				this.canvasWidth = systemInfo.windowWidth - 40

				this.ctx = uni.createCanvasContext('signatureCanvas', this)
				this.ctx.lineWidth = 4 * this.dpr
				this.ctx.lineCap = 'round'
				this.ctx.lineJoin = 'round'
				this.ctx.strokeStyle = '#333'
			},

			// 触摸开始
			handleTouchStart(e) {
				const point = this.getTouchPoint(e)
				this.points.push([point])
			},

			// 触摸移动
			handleTouchMove(e) {
				const point = this.getTouchPoint(e)
				const lastPoints = this.points[this.points.length - 1]

				if (lastPoints && lastPoints.length > 0) {
					const lastPoint = lastPoints[lastPoints.length - 1]
					this.drawLine(lastPoint.x, lastPoint.y, point.x, point.y)
					lastPoints.push(point)
				}
			},

			// 触摸结束
			handleTouchEnd() {
				this.points.push([])
			},

			// 获取触摸点坐标
			getTouchPoint(e) {
				// 处理不同平台坐标差异
				const touch = e.touches[0] || e.changedTouches[0]
				return {
					x: touch.x * this.dpr,
					y: touch.y * this.dpr
				}
			},

			// 绘制线条
			drawLine(x1, y1, x2, y2) {
				this.ctx.beginPath()
				this.ctx.moveTo(x1, y1)
				this.ctx.lineTo(x2, y2)
				this.ctx.stroke()
				this.ctx.draw(true)
			},

			// 重签
			handleReset() {
				this.points = []
				this.hasSignature = false
				this.ctx.clearRect(0, 0, this.canvasWidth * this.dpr, this.canvasHeight * this.dpr)
				this.ctx.draw(true)
			},

			// 确认签名
			handleConfirm() {
				uni.canvasToTempFilePath({
					canvasId: 'signatureCanvas',
					quality: 1,
					success: (res) => {
						this.hasSignature = true
						this.$emit('signed', res.tempFilePath)
					},
					fail: (err) => {
						uni.showToast({
							title: '签名保存失败',
							icon: 'none'
						})
					}
				}, this)
			}

		}
	}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
	.bigbox {
		padding: 10rpx 20rpx;
	}

	.list {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 30rpx;
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		line-height: 80rpx;
		border-bottom: 1rpx solid #F1F1F1;
		align-items: center;
		
	}
	.value{
		margin-right:20rpx;
		text-align: end;
		
	}
	.middlelist{
		margin: 20rpx 0;
		border: 1rpx dashed #C0C0C0;
		border-radius: 12rpx;
	}
	.price{
		color: red;
	}
	/* .value>input{
		margin: 10rpx 0; 
	} */
	/* 以下Css均为Ai */
	.signature-area {
		padding: 20rpx;
		margin-top: 40rpx;
		background: #fff;
		border-radius: 16rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.signature-canvas {
		width: 100%;
		height: 400rpx;
		background: #f8f8f8;
		border: 2rpx dashed #ddd;
		border-radius: 8rpx;
	}

	.button-group {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
		padding: 0 20rpx;
	}

	.btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.reset-btn {
		background: #f8f8f8;
		color: #666;
		margin-right: 20rpx;
	}

	.confirm-btn {
		background: #007AFF;
		color: white;
	}

	.confirm-btn[disabled] {
		background: #ccc;
	}

	.signature-tip {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		transition: color 0.3s;
	}

	.signature-tip.confirmed {
		color: #09bb07;
	}



	.maintenance-plan {
		padding: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		padding-left: 20rpx;
		border-left: 8rpx solid #007AFF;
		margin: 20rpx 0;
	}

	.parts-list {
		margin: 30rpx 0;
	}

	.list-header {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background: #f5f5f5;
		font-weight: bold;
		border-radius: 8rpx;
	}

	.part-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.detail-list {
		border-top: 2rpx solid #eee;
		padding-top: 20rpx;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		padding: 16rpx 20rpx;
	}

	.label {
		color: #666;
	}

/* 	.value {
		color: #333;
	} */

	.total-price {
		color: #e64340;
		font-weight: bold;
	}

	.signature-area {
		margin-top: 40rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.signature-pad {
		height: 300rpx;
		border: 2rpx dashed #ccc;
		border-radius: 8rpx;
		margin: 20rpx 0;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f9f9f9;
	}

	.placeholder-text {
		color: #999;
		font-size: 28rpx;
	}

	.signature-image {
		width: 100%;
		height: 100%;
	}

	.confirm-tip {
		text-align: center;
		color: #666;
		font-size: 24rpx;
		margin: 20rpx 0;
	}

	.confirm-btn {
		background: #007AFF;
		color: white;
		border-radius: 50rpx;
		margin: 0 60rpx;
	}

	.confirm-btn[disabled] {
		background: #ccc;
		color: #999;
	}

	radio-group>label:last-child {
		margin-left: 15rpx;
	}
</style>
